<template>
  <div class="wk-detail-table">
    <template v-if="showType === 'default'">
      <div v-for="(children, index) in fieldList" :key="index" class="detail-item">
        <flexbox class="detail-item__head">
          <div class="detail-item__head-title">{{ title }}（{{ index+1 }}）</div>
          <el-button v-if="fieldList.length > 1" icon="wk wk-icon-bin" link @click="deleteClick(index)"/>
        </flexbox>
        <wk-form-items :field-from="fieldForm[index]" :field-list="children"
          :prop-prefix="`${propPrefix || ''}[${index}].`"
          :disabled="disabled"
          @change="formChange"/>
        <div class="add-btn">
          <el-button v-if="!disabled" link @click="addClick">
            <i class="wk wk-l-plus" />
            {{ btnName }}
          </el-button>
        </div>
      </div>
    </template>
    <div v-else-if="showType === 'table'" class="detail-item">
      <wk-table-items :field-from="fieldForm" :field-list="addFieldList" :prop-prefix="propPrefix" :disabled="disabled"
                      @delete="deleteClick"
                      @change="formChange"></wk-table-items>
      <div class="add-btn">
        <el-button v-if="!disabled" link @click="addClick">
          <i class="wk wk-l-plus" />
          {{ btnName }}
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
// 明细表格
import WkTableItems from './WkTableItems'
import WkFormItem from "../WkForm/WkFormItems.vue";
import {objDeepCopy} from "utils";


defineOptions({
  name: 'WkDetailTable',
})

const props = defineProps({
  title: String,
  showType: {
    type: String,
    default: 'default' // defalut table
  },
  propPrefix: String,
  btnName: String,
  addFieldList: Array,
  addFieldForm: Object,
  fieldForm: {
    type: Array,
    default: () => {
      return []
    }
  },
  fieldList: {
    type: Array,
    default: () => {
      return []
    }
  },
  disabled: Boolean
})

const emits = defineEmits(['change'])
function formChange(item, index, value, valueList) {
  emits('change', item, index, value, valueList)
  // 来自Emitter from 'element-ui/lib/mixins/emitter'
  this.dispatch('ElFormItem', 'el.form.change', props.fieldForm)
}

function addClick() {
  props.fieldList.push(objDeepCopy(props.addFieldList))
  props.fieldForm.push(objDeepCopy(props.addFieldForm))
}

function deleteClick(index) {
  props.fieldList.splice(index, 1)
  props.fieldForm.splice(index, 1)
}

</script>


<script>


// import Emitter from 'element-ui/lib/mixins/emitter'

export default {
  components: {
    // WkFormItems: defineAsyncComponent(() => import('../WkForm/WkFormItems.vue')),
    // WkTableItems
  },
  // mixins: [Emitter],
  props: {},
  data() {
    return {
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
.wk-detail-table {
  font-size: 14px;
  line-height: inherit;

  .wk-form-items {
    padding: 0;
  }

  .detail-item {
    border-radius: 3px;
    border: 1px solid #e1e1e1;
    background-color: white;
     &__head {
      padding: 10px 20px;
      background-color: #f5f5f5;
      &-title {
        height: auto;
        font-size: 12px;
        color: #333;
        flex: 1;
        line-height: normal;
      }
      .el-button {
        padding: 0;
      }
    }
  }

  .detail-item + .detail-item {
    margin-top: 10px;
  }

  .add-btn {
    text-align: right;
    padding-right: 10px;
    .wk-l-plus {
      font-size: 12px;
    }
  }
}
</style>
